@import '~highlight.js/styles/github.css';
@import '../../common';

.alice-carousel__wrapper {
	border: solid 1px rgba($color-dark, 0.3);
}

li.alice-carousel__dots-item.__custom {
	vertical-align: middle;
	cursor: pointer;
	padding: 5px;
}

.thumbs {
	max-width: 500px;
	margin: 30px auto;
	padding: 0 100px;
	position: relative;

	.btn-prev,
	.btn-next {
		position: absolute;
		top: 25px;
		font-size: 50px;
		color: $color-bg;
		cursor: pointer;
	}
	.btn-prev {
		left: 25px;
	}
	.btn-next {
		right: 25px;
	}
}

.text {
	color: $color-dark;
}

.b-roulette {
	margin-bottom: 10px;

	.item {
		padding: 4px;
	}
	.__target {
		&:after {
			border: none !important;
		}
	}

	&.__highlighted {
		background: none;
	}

	//&.__highlighted.__size-1 {
	//	.__target::after {
	//		border: solid 2px $color-base !important;
	//	}
	//}
	//
	//&.__highlighted.__size-3 {
	//	.__target + li::after {
	//		border: solid 2px $color-base !important;
	//	}
	//}
	//
	//&.__highlighted.__size-5 {
	//	.__target + li + li::after {
	//		border: solid 2px $color-base !important;
	//	}
	//}
}

.alice-carousel__stage-item.__active {
	&:after {
		content: '';
		display: block;
		position: absolute;
		top: 2px;
		left: 2px;
		right: 2px;
		bottom: 2px;
		border: solid 1px transparent;
		transition: border 0.8s;
	}
}

.alice-carousel__stage-item.__target {
	&:after {
		border: solid 1px rgba($color-dark-lighten, 0.8);
	}
}

.thumb,
.thumb > .item {
	width: 200px;
	height: 100px;
}

.item {
	height: 200px;
	padding: 2px;
	box-sizing: border-box;
	font-size: 0;
	color: transparent;
	&:before {
		content: attr(data-value);
		height: 100%;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24px;
		font-weight: 300;
		user-select: none;
		color: $color-light;
		background-color: $color-bg;
	}
	&-inner {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 1;
	}

	&.roulette-1:before {
		background-color: $color-roulette-1;
	}
	&.roulette-2:before {
		background-color: $color-roulette-2;
	}
	&.roulette-3:before {
		background-color: $color-roulette-3;
	}
	&.roulette-4:before {
		background-color: $color-roulette-4;
	}
	&.roulette-5:before {
		background-color: $color-roulette-5;
	}
}

.link {
	display: block;
	height: 200px;
	padding: 3px;
	position: relative;
	z-index: 1;

	img {
		display: block;
		width: 100%;
		height: 100%;
	}
}

.b-content {
	position: relative;
}

.b-opacity {
	top: 0;
	height: 100%;
	width: 100%;
	position: absolute;
	background: linear-gradient(
		90deg,
		rgba($color-roulette-6, 0.6),
		transparent 30%,
		transparent 70%,
		rgba($color-roulette-6, 1)
	);

	&:after {
		content: '';
		width: 2px;
		height: calc(100% + 10px);
		left: calc(50% - 1px);
		top: -5px;
		position: absolute;
		border-left-width: 2px;
		border-left-style: dashed;
		border-left-color: $color-dark-lighten;
		z-index: 1;
	}
}
